import React, { useState } from 'react';
import styles from './OptimizedImage.module.css';

interface OptimizedImageProps {
  src: string;
  alt: string;
  className?: string;
  width?: string | number;
  height?: string | number;
}

export default function OptimizedImage({
  src,
  alt,
  className,
  width,
  height,
}: OptimizedImageProps) {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div className={styles.imageWrapper}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        className={`${styles.image} ${isLoaded ? styles.loaded : ''} ${className || ''}`}
        onLoad={() => setIsLoaded(true)}
        style={{ width, height }}
      />
      {!isLoaded && <div className={styles.skeleton} />}
    </div>
  );
} 